<template>
  <el-form-item class="edit-item edit-item-date-picker date-picker-normal">
    <slot name="label">
      <label style="max-width: 95px; line-height: 16px;">
        {{label}}
        <TooltipsCommon v-if="!!tooltips" :tooltips="tooltips"></TooltipsCommon>
      </label>
    </slot>

    <el-date-picker
      v-model="dateVal"
      type="datetime"
      :format="format"
      :value-format="format"
      clearable
      placeholder="选择日期时间">
    </el-date-picker>
  </el-form-item>
</template>

<script>
  import { defineAsyncComponent } from 'vue';
  export default {
    name: 'DatePickerNormal',
    props: ["label", "value", "modelValue", "tooltips", "format"],
    emits: ["change", "update:modelValue"],
    computed: {
      dateVal: {
        set(val) {
          this.$emit('update:modelValue', val);
          this.$emit('change', val);
        },
        get() {
          return this.modelValue
        },
      },
    },
    components: {
      TooltipsCommon: defineAsyncComponent(() => import('@/views/components/edit/tooltip-common.vue')),
    }
  }
</script>

<style lang="scss">
  .date-picker-normal {
    .el-input__icon {
      line-height: 30px !important;
    }
  }
</style>
